<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import http_login from '@/api/login.js'
import { ElMessage } from 'element-plus'
import router from '@/router/index.js'
import { useUserStore } from '@/stores/user.js'

// 登录注册切换
const isLogin = ref(true)
// 是否勾选了阅读协议
const isRead = ref(false)
// 是否是手机登录
const isPhone = ref(false)
const loginText = ref('手机号登录')
const imageSrc = ref('')
const smsDisableFalg = ref(false)
const smsText = ref('发送验证码')
// 改变登录的方式
const changeLogin = () => {
  loginText.value = isPhone.value ? '手机号登录' : '用户名/密码登录'
  isPhone.value = !isPhone.value
  resetFormData()
}
// 登录注册表单
const formData = ref({
  username: '',
  password: '',
  confirmPassword: '',
  phone: '',
  code: ''
})
// 表单验证
const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    {
      pattern: /^[\w\s]{2,20}$/,
      message: '长度必须为2-20位非特殊字符',
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{5,12}$/,
      message: '长度必须为5-12位非空格字符',
      trigger: 'blur'
    }
  ],
  confirmPassword: [
    { required: true, message: '请输入确认密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入确认密码'))
        }
        if (value !== formData.value.password) {
          callback(new Error('密码不一致，请重新输入'))
        }
        callback()
      },
      trigger: 'blur'
    }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      pattern:
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
      message: '请输入正确的手机号',
      trigger: 'blur'
    }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入验证码'))
        }
        callback()
      },
      trigger: 'blur'
    }
  ]
})
// 获得图形验证码
const getImgCode = async () => {
  const result = await http_login.getImgCode()
  imageSrc.value = 'data:image/png;base64,' + result.data //把base64编码转为图片
}
//  发送短信验证码
const registerPhoneForm = ref() //获得el-form的phone一列的ref
const sendSmsCode = async () => {
  await registerPhoneForm.value.validate()
  const result = await http_login.sendSmsCode(formData.value.phone)
  if (result.code === 200) {
    ElMessage({
      message: '短信发送成功',
      type: 'success'
    })
    let i = 60
    smsText.value = '60 s'
    smsDisableFalg.value = true
    const timer = setInterval(() => {
      i--
      smsText.value = i + ' s'

      if (i <= 0) {
        clearInterval(timer)
        smsText.value = '发送验证码'
        smsDisableFalg.value = false
      }
    }, 1000)
  }
}
// 重置formData
const resetFormData = () => {
  formData.value.username = ''
  formData.value.password = ''
  formData.value.confirmPassword = ''
  formData.value.phone = ''
  formData.value.code = ''
}
// 注册
const registerForm = ref() //获得el-form的ref
const register = async () => {
  await registerForm.value.validate() //进行表单的验证码
  // 验证码的判断
  const result_code = await http_login.checkSmsCode(
    formData.value.code,
    formData.value.phone
  )
  if (result_code.code === 200) {
    // 注册
    const result_register = await http_login.register(formData.value)
    if (result_register.code === 200) {
      setTimeout(() => {
        isLogin.value = !isLogin.value
      }, 3000)
      ElMessage({
        showClose: true,
        message: '注册成功，将在3s内自动跳转到登录页面',
        type: 'success'
      })
    }
  }
}
// 登录
const loginForm = ref()
const login = async () => {
  if (!isRead.value) {
    ElMessage({
      showClose: true,
      message: '请勾选用户协议',
      type: 'error'
    })
    return
  }
  await loginForm.value.validate() //进行表单的验证码
  if (!isPhone.value) {
    const result_code = await http_login.checkImgCode(formData.value.code)
    if (result_code.code === 200) {
      const result_login = await http_login.login(formData.value)
      if (result_login.code === 200) {
        const userStore = useUserStore()
        userStore.setToken(result_login.data)
        setTimeout(() => {
          router.push('/')
        }, 3000)
        ElMessage({
          showClose: true,
          message: '登录成功，将在3s内自动跳转到主页面',
          type: 'success'
        })
      } else {
        getImgCode()
      }
    } else {
      getImgCode()
    }
  } else {
    const result_code = await http_login.checkSmsCode(
      formData.value.code,
      formData.value.phone
    )
    if (result_code.code === 200) {
      const result_login = await http_login.login(formData.value)
      if (result_login.code === 200) {
        const userStore = useUserStore()
        userStore.setToken(result_login.data)
        setTimeout(() => {
          router.push('/')
        }, 3000)
        ElMessage({
          showClose: true,
          message: '登录成功，将在3s内自动跳转到主页面',
          type: 'success'
        })
      } else {
        getImgCode
      }
    } else {
      getImgCode
    }
  }
}
//  监听注册和登录界面的切换
watch(isLogin, () => {
  resetFormData()
})

// 生命周期函数
onMounted(() => {
  window.scrollTo(0, 0)
  getImgCode()
})
</script>

<template>
  <div class="loginBox">
    <div class="box">
      <div class="left">
        <ul>
          <li>
            <div
              style="
                width: 40px;
                height: 40px;
                overflow: hidden;
                border-radius: 20%;
              "
            >
              <img
                style="width: 40px; height: 40px"
                src="http://121.40.171.110:9000/client-material/LOGO.jpg"
              />
            </div>
            <div style="">
              <ul style="display: block; width: 100%; margin-left: -30px">
                <b>找工作</b>
                <div style="margin-top: 3px">上321直聘直接谈</div>
              </ul>
            </div>
          </li>
          <li>
            <div
              style="
                width: 40px;
                height: 40px;
                overflow: hidden;
                border-radius: 20%;
              "
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 1024 1024"
                data-v-ea893728=""
              >
                <path
                  fill="currentColor"
                  d="m174.72 855.68 135.296-45.12 23.68 11.84C388.096 849.536 448.576 864 512 864c211.84 0 384-166.784 384-352S723.84 160 512 160 128 326.784 128 512c0 69.12 24.96 139.264 70.848 199.232l22.08 28.8-46.272 115.584zm-45.248 82.56A32 32 0 0 1 89.6 896l58.368-145.92C94.72 680.32 64 596.864 64 512 64 299.904 256 96 512 96s448 203.904 448 416-192 416-448 416a461.056 461.056 0 0 1-206.912-48.384l-175.616 58.56z"
                ></path>
                <path
                  fill="currentColor"
                  d="M352 576h320q32 0 32 32t-32 32H352q-32 0-32-32t32-32m32-192h256q32 0 32 32t-32 32H384q-32 0-32-32t32-32"
                ></path>
              </svg>
            </div>
            <div style="">
              <ul style="display: block; width: 100%; margin-left: -30px">
                <b>沟通</b>
                <div style="margin-top: 3px">在线职位及时沟通</div>
              </ul>
            </div>
          </li>
          <li>
            <div
              style="
                width: 40px;
                height: 40px;
                overflow: hidden;
                border-radius: 20%;
              "
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 1024 1024"
                data-v-ea893728=""
              >
                <path
                  fill="currentColor"
                  d="M273.536 736H800a64 64 0 0 0 64-64V256a64 64 0 0 0-64-64H224a64 64 0 0 0-64 64v570.88zM296 800 147.968 918.4A32 32 0 0 1 96 893.44V256a128 128 0 0 1 128-128h576a128 128 0 0 1 128 128v416a128 128 0 0 1-128 128z"
                ></path>
              </svg>
            </div>
            <div style="">
              <ul style="display: block; width: 100%; margin-left: -30px">
                <b>招聘效果好</b>
                <div style="margin-top: 3px">与职场牛人在线开聊</div>
              </ul>
            </div>
          </li>
          <li>
            <div
              style="
                width: 40px;
                height: 40px;
                overflow: hidden;
                border-radius: 20%;
              "
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 1024 1024"
                data-v-ea893728=""
              >
                <path
                  fill="currentColor"
                  d="M280.768 753.728 691.456 167.04a32 32 0 1 1 52.416 36.672L314.24 817.472a32 32 0 0 1-45.44 7.296l-230.4-172.8a32 32 0 0 1 38.4-51.2l203.968 152.96zM736 448a32 32 0 1 1 0-64h192a32 32 0 1 1 0 64zM608 640a32 32 0 0 1 0-64h319.936a32 32 0 1 1 0 64zM480 832a32 32 0 1 1 0-64h447.936a32 32 0 1 1 0 64z"
                ></path>
              </svg>
            </div>
            <div style="">
              <ul style="display: block; width: 100%; margin-left: -30px">
                <b>更多在线牛人</b>
                <div style="margin-top: 3px">入职速度快</div>
              </ul>
            </div>
          </li>
          <li>
            <div
              style="
                width: 40px;
                height: 40px;
                overflow: hidden;
                border-radius: 20%;
              "
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 1024 1024"
                data-v-ea893728=""
              >
                <path
                  fill="currentColor"
                  d="M128 384h768v-64a64 64 0 0 0-64-64H192a64 64 0 0 0-64 64zm0 64v320a64 64 0 0 0 64 64h640a64 64 0 0 0 64-64V448zm64-256h640a128 128 0 0 1 128 128v448a128 128 0 0 1-128 128H192A128 128 0 0 1 64 768V320a128 128 0 0 1 128-128"
                ></path>
                <path
                  fill="currentColor"
                  d="M384 128v64h256v-64zm0-64h256a64 64 0 0 1 64 64v64a64 64 0 0 1-64 64H384a64 64 0 0 1-64-64v-64a64 64 0 0 1 64-64"
                ></path>
              </svg>
            </div>
            <div style="">
              <ul style="display: block; width: 100%; margin-left: -30px">
                <b>人才匹配度高</b>
                <div style="margin-top: 3px">获取更准确的牛人</div>
              </ul>
            </div>
          </li>
          <li>
            <div
              style="
                width: 40px;
                height: 40px;
                overflow: hidden;
                border-radius: 20%;
              "
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 1024 1024"
                data-v-ea893728=""
              >
                <path
                  fill="currentColor"
                  d="M512 64h64v192h-64zm0 576h64v192h-64zM160 480v-64h192v64zm576 0v-64h192v64zM249.856 199.04l45.248-45.184L430.848 289.6 385.6 334.848 249.856 199.104zM657.152 606.4l45.248-45.248 135.744 135.744-45.248 45.248zM114.048 923.2 68.8 877.952l316.8-316.8 45.248 45.248zM702.4 334.848 657.152 289.6l135.744-135.744 45.248 45.248z"
                ></path>
              </svg>
            </div>
            <div style="">
              <ul style="display: block; width: 100%; margin-left: -30px">
                <b>任选性</b>
                <div style="margin-top: 3px">各大行业职业任你选</div>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <div class="right">
        <div class="loginRegister">
          <div class="check">
            <div
              :class="isLogin ? 'active' : ''"
              style="width: 50%; border-radius: 40px; cursor: pointer"
              @click="isLogin = true"
            >
              我要登录
            </div>
            <div
              :class="!isLogin ? 'active' : ''"
              style="width: 50%; border-radius: 40px; cursor: pointer"
              @click="isLogin = false"
            >
              我要注册
            </div>
          </div>
          <div class="login" v-show="isLogin">
            <div class="title">
              <div style="font-size: 24px; margin-bottom: 10px">
                登录321直聘
              </div>
              <div style="font-size: 12px; color: #999">
                支持用户名/密码+手机号登录
              </div>
            </div>
            <el-form
              :rules="rules"
              v-if="!isPhone"
              :model="formData"
              label-width="110px"
              ref="loginForm"
            >
              <el-form-item prop="username" label="用户名：">
                <el-input
                  style="width: 300px; height: 40px"
                  v-model="formData.username"
                  placeholder="请输入用户名"
                />
              </el-form-item>
              <el-form-item prop="password" label="密码：">
                <el-input
                  style="width: 300px; height: 40px"
                  v-model="formData.password"
                  type="password"
                  placeholder="请输入密码"
                />
              </el-form-item>
              <el-form-item prop="code" label="图形验证码：">
                <el-input
                  v-model="formData.code"
                  style="width: 150px; height: 40px"
                />
                <img
                  @click="getImgCode"
                  style="margin-left: 20px; cursor: pointer"
                  :src="imageSrc"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  style="width: 95%; height: 40px"
                  @click="login"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
            <!-- -------------------------------------------------------------------- -->
            <el-form
              ref="loginForm"
              v-else
              :rules="rules"
              :model="formData"
              label-width="80px"
            >
              <el-form-item label="手机号：" prop="phone">
                <el-input
                  style="width: 200px; height: 40px"
                  v-model="formData.phone"
                  placeholder="请输入手机号"
                />
                <el-button
                  type="success"
                  style="margin-left: 10px"
                  @click="sendSmsCode"
                  :disabled="smsDisableFalg"
                  >{{ smsText }}</el-button
                >
              </el-form-item>
              <el-form-item label="验证码：" prop="code">
                <el-input
                  style="width: 100px; height: 40px"
                  v-model="formData.code"
                  placeholder="验证码"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  style="width: 95%; height: 40px"
                  @click="login"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
            <div
              style="
                margin-left: 80px;
                text-align: center;
                width: 300px;
                height: 40px;
                font-size: 18px;
                color: #409eff;
                line-height: 42px;
              "
            >
              <el-icon v-if="isPhone"><User /></el-icon>
              <el-icon v-else><Iphone /></el-icon>
              <el-button
                @click="changeLogin"
                type="primary"
                style="margin-bottom: 5px"
                link
                >{{ loginText }}</el-button
              >
            </div>
          </div>
          <div label="register" v-show="!isLogin">
            <div class="title">
              <div style="font-size: 24px; margin-bottom: 10px">
                注册321直聘用户
              </div>
              <div style="font-size: 12px; color: #999">
                支持用户名/密码+手机号注册
              </div>
            </div>
            <el-form
              ref="registerForm"
              :rules="rules"
              :model="formData"
              label-width="100px"
            >
              <el-form-item label="用户名：" prop="username">
                <el-input
                  style="width: 300px; height: 40px"
                  v-model="formData.username"
                  placeholder="请输入用户名"
                />
              </el-form-item>
              <el-form-item label="密码：" prop="password">
                <el-input
                  style="width: 300px; height: 40px"
                  v-model="formData.password"
                  type="password"
                  placeholder="请输入密码"
                />
              </el-form-item>
              <el-form-item label="确认密码：" prop="confirmPassword">
                <el-input
                  style="width: 300px; height: 40px"
                  v-model="formData.confirmPassword"
                  type="password"
                  placeholder="请输入密码"
                />
              </el-form-item>
              <el-form-item
                ref="registerPhoneForm"
                label="手机号："
                prop="phone"
              >
                <el-input
                  style="width: 200px; height: 40px"
                  v-model="formData.phone"
                  placeholder="请输入手机号"
                />
                <el-button
                  type="success"
                  style="margin-left: 5px; width: 90px"
                  @click="sendSmsCode"
                  :disabled="smsDisableFalg"
                  >{{ smsText }}</el-button
                >
              </el-form-item>
              <el-form-item label="验证码：" prop="code">
                <el-input
                  style="width: 100px; height: 40px"
                  v-model="formData.code"
                  placeholder="验证码"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  style="width: 95%; height: 40px"
                  @click="register"
                  >注册</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div v-if="isLogin" class="buttom">
            <div>
              <el-checkbox
                style="margin-right: 10px"
                v-model="isRead"
                size="large"
              />
              已阅读并同意321直聘
              <el-button type="primary" link>《用户协议》</el-button>
              <el-button style="margin-left: -5px" type="primary" link
                >《隐私政策》</el-button
              >，允许321直聘统一管理本人账号信息
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.loginBox {
  background-color: #00c1c1;
  width: 100%;
  position: relative;
  height: 720px;
  .box {
    width: 850px;
    height: 600px;
    background-color: #fff;
    position: absolute;
    left: 20%;
    top: 10%;
    border-radius: 5%;
    display: flex;
    overflow: hidden;
    .left {
      background-color: #f3f7f6;
      flex: 1;
      color: #00c1c1;
      ul {
        list-style: none;
        li {
          display: flex;
          margin-top: 50px;
        }
      }
    }
    .right {
      flex: 2;
      .loginRegister {
        width: 400px;
        margin: 0 auto;
        .check {
          margin-top: 60px;
          background-color: #f8f8f8;
          height: 50px;
          border-radius: 20px;
          display: flex;
          justify-content: space-around;
          font-size: 20px;
          line-height: 50px;
          text-align: center;
          padding: 5px;
        }
        .active {
          color: #409eff;
          background-color: #fff;
        }
        .title {
          margin: 15px auto;
          text-align: center;
        }
        .buttom {
          font-size: 12px;
          text-align: center;
        }
      }
    }
  }
}
</style>
